<template>
    <div id="app">
        <el-card>
            <el-upload class="avatar-uploader" action="http://localhost:9000/file-upload" :show-file-list="false"
                :on-success="handleAvatarSuccess">
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <el-icon v-else>
                    <Plus />
                </el-icon>
            </el-upload>
        </el-card>
    </div>
</template>

<script>
import { Plus } from '@element-plus/icons-vue'
import { ref } from 'vue'

export default {
    name: "Upload",
    components: {
        Plus
    },
    setup() {
        const imageUrl = ref('')

        const handleAvatarSuccess = (res, file) => {
            console.log(res);
            imageUrl.value = res.data;
        }

        return {
            imageUrl,
            handleAvatarSuccess
        }
    }
}
</script>

<style scoped>
.avatar-uploader {
    text-align: center;
    width: 100%;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
    margin: 0 auto;
}
</style>
